<template>
	<view>
		<!-- <uni-nav-bar left-icon="back" left-text="" right-text="" title='新增收货地址'></uni-nav-bar> -->

		<view class="form">
			<form @submit="submit">

				<view class="item uni-form-item uni-column">
					<view class="title">收件人</view>
					<input class="uni-input" name="name" placeholder="输入收件人姓名" />
				</view>

				<view class="item uni-form-item uni-column">
					<view class="title">电话号码</view>
					<input class="uni-input" name="tel" placeholder="输入收件人电话号" />
				</view>

				<view class="item uni-form-item uni-column">
					<view class="title">所在地区</view>
					<pickerAddress style="margin-top:20rpx" @change="change">{{txt}}</pickerAddress>
				</view>

				<view class="item uni-form-item uni-column">
					<view class="title">详细地址</view>
					<input class="uni-input" name='detail' placeholder="输入详细地址" />
				</view>

				<view class="item uni-form-item uni-column">
					<view class="title">设置默认地址</view>
					<switch name='default' style="margin-top:10rpx" class="switch" />
				</view>

				<button form-type="submit" type="default">提交</button>
			</form>

		</view>
	</view>
</template>

<script>
	import pickerAddress from "../../../../components/wangding-pickerAddress/wangding-pickerAddress.vue"
	import {
		findAllAddress,
		addAddressInfo,
		delAddressInfo,
		makeAddressDefaul,
		updateAddressInfo
	} from "../../../../api/my/address/address.js"
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				txt: '请选择收货地址',
				title: 'Hello'
			};
		},
		methods: {
			change(data) {
				this.txt = data.data.join(' ')
				console.log(data.data.join(' '))
			},
			submit(e) {
				console.log(e.detail.value);
				var value = e.detail.value
				addAddressInfo({
					"city": this.txt,
					"defaultStatus": Number(value.default),
					"detailAddress": value.detail,
					"name": value.name,
					"phoneNumber": value.tel,
				}).then(res => {
					console.log(res)
					if (res.success) {
						uni.showToast({
							title: '添加地址成功'
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 1700)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		width: 710rpx;
		margin: 20rpx auto;
		border-radius: 12rpx;
		box-sizing: border-box;
		background-color: #fff;
		padding: 40rpx 0;

		button {
			width: 710rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			position: fixed;
			left: 20rpx;
			bottom: 60rpx;
		}

		.item {
			width: 710rpx;
			display: flex;
			box-sizing: border-box;
			justify-content: space-between;
			padding: 0 20rpx;
			font-size: 26rpx;
			margin: 20rpx auto;

			.title {
				width: 200rpx;
				line-height: 80rpx;
				box-sizing: border-box;

			}

			input {
				font-size: 26rpx;
				text-indent: 20rpx;
				box-sizing: border-box;
				width: 600rpx;
				height: 80rpx;
				border: 2rpx solid #eee;
				border-radius: 12rpx;
			}

			textarea {
				font-size: 26rpx;
				border: 2rpx solid #eee;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 12rpx;
			}
		}
	}
</style>
